<template>
  <div class="comment-input">
    <!-- 输入框和按钮容器 -->
    <el-row gutter="10" align="middle">
      <el-col :span="18">
        <!-- 文本区域输入框 -->
        <el-input
          v-model="comment"
          placeholder="输入评论..."
          type="textarea"
          rows="3"
        ></el-input>
      </el-col>

      <el-col :span="6" class="button-container">
        <!-- 发布按钮 -->
        <el-button
          type="primary"
          @click="submitComment"
          :disabled="comment.trim() === '' && !selectedEmoji"
          class="publish-button"
        >
          发布
        </el-button>
      </el-col>
    </el-row>

    <!-- 表情包选择按钮 -->
    <el-row>
      <el-col :span="24" class="emoji-picker-container">
        <el-button type="info" @click="fetchEmojis">
          😊 添加表情
        </el-button>
        <div v-if="showEmojiPicker" class="emoji-list">
          <div
            v-for="(emoji, index) in emojiList"
            :key="emoji.id"
            class="emoji-item-container"
            @click="selectEmoji(emoji)"
          >
            <!-- 图片显示 -->
            <ElImage :src="emoji.emojiUrl" class="emoji-item" />
            <!-- 右上角的数字标记 -->
            <div class="emoji-remaining">{{ emoji.remainingUsage }}</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 显示已选择的表情包 -->
    <div v-if="selectedEmoji?.emojiUrl" class="selected-emoji">
      <p>已选择的表情:</p>
      <img :src="selectedEmoji.emojiUrl" alt="Selected emoji" class="emoji-preview" />
    </div>

    <!-- 评论展示 -->
    <div class="comments-display">
      <div v-for="(comment, index) in comments" :key="index" class="comment-item">
        <p>{{ comment.text }}</p>
        <img v-if="comment.emojiUrl" :src="comment.emojiUrl" alt="Comment emoji" class="comment-emoji" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';
import { ElImage } from 'element-plus';
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
// 定义事件发射器
const emit = defineEmits(['submit']);

// 定义评论输入框的内容
const comment = ref<string>('');

// 控制表情包选择器的显示状态
const showEmojiPicker = ref(false);
interface emoji {
  emojiUrl: string;
  id: number;
}
// 存储用户选择的表情包 URL
var selectedEmoji = ref<emoji>();

// 存储表情包列表（从后端获取）
const emojiList = ref<emoji[]>([]);

// 存储评论的列表，每个评论可能包含文字和表情包
const comments = ref<{ text: string, emojiUrl?: string }[]>([]);

/**
 * 提交评论
 * 如果用户输入了文字或者选择了表情包，则将其添加到评论列表中。
 */
const submitComment = () => {
  if (comment.value.trim() !== '' || selectedEmoji.value) {
    const data = {
      text: comment.value.trim(),
      emojiUrl: selectedEmoji.value || undefined,
    };
    comments.value.push({
      text: comment.value.trim(),
      emojiUrl: selectedEmoji.value?.emojiUrl || undefined,
    });
    emit('submit', data);
    comment.value = ''; // 提交后清空输入框
    selectedEmoji =ref<emoji>();  // 清除已选择的表情包
    showEmojiPicker.value = false; // 提交后隐藏表情包选择器
  }
};

/**
 * 选择表情包
 * 当用户点击某个表情包时，将该表情包的 URL 存储起来。
 */
const selectEmoji = (emojiUrl: emoji) => {
  selectedEmoji.value = emojiUrl; // 记录选中的表情包
};

/**
 * 获取表情包列表
 * 点击添加表情按钮时，向后端发起请求，获取用户拥有的表情包列表。
 */
const fetchEmojis = async () => {
  try {
    const userId = userStore.userInfo.id; 
    const response = await axios.get(`/api/user_emojis/${userId}`);
    
    
    emojiList.value = response.data.data; // 更新表情包列表
    console.log(emojiList.value);
    showEmojiPicker.value = true; // 显示表情包选择器
  } catch (error) {
    console.error('获取表情包列表失败:', error);
  }
};
</script>

<style scoped>
.comment-input {
  width: 100%;
  max-width: 450px;
  margin: 20px auto;
}

.button-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-input__inner {
  font-size: 14px;
  border-radius: 6px;
}

.publish-button {
  height: 36px;
  width: 100%;
  padding: 0;
  border-radius: 6px;
  font-size: 14px;
  line-height: 36px;
}

.emoji-picker-container {
  margin-top: 10px;
}

.emoji-list {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 6px;
  margin-top: 10px;
}

.emoji-item-container {
  position: relative;
  margin: 5px;
  cursor: pointer;
}

.emoji-item {
  width: 32px;
  height: 32px;
}

.emoji-remaining {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: rgba(0, 0, 0, 0.474);
  color: white;
  font-size: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}


.selected-emoji {
  margin-top: 10px;
}

.emoji-preview {
  width: 40px;
  height: 40px;
}

.comments-display {
  margin-top: 20px;
  padding: 10px;
  border-top: 1px solid #eee;
}

.comment-item {
  margin-bottom: 10px;
}

.comment-emoji {
  width: 40px;
  height: 40px;
  margin-top: 5px;
}
</style>
